<template>
  <div class="order-charts">

    <div id="myChart" style="width: 100%;height: 100%" />
  </div>
</template>

<script>
var echarts = require('echarts')
export default {
  components: {

  },
  props: {
    orderData: {
      type: Array
    }
  },
  data() {
    return {

    }
  },
  computed: {

  },
  created() {
    // console.log(this.orderData)
  },
  mounted() {
    this.initMyChart()
  },
  methods: {
    initMyChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('myChart'))
      var xAxisData = []
      var orderDataArr = []
      var returnOrderDataArr = []
      // 把数据进行处理  得到符合需求的数据格式
      this.orderData.forEach(item => {
        xAxisData.push(item.date)
        orderDataArr.push(item.orderCount)
        returnOrderDataArr.push(item.returnOrderCount)
      })
      console.log(xAxisData)
      console.log(orderDataArr)
      console.log(returnOrderDataArr)
      var options = {
        title: {
          text: '订单/退单数据',
          // 标题字体样式
          textStyle: {
            color: '#9AA8D4',
            fontSize: 22,
            fontWeight: 'normal'
          }
        },
        // 两个按钮的样式
        legend: {
          // 对应 series里的 name
          data: ['订单', '退单'],
          // 距离底部
          bottom: 2,
          // 字体样式
          textStyle: {
            color: '#A8AAB3', // 坐标值得具体的颜色
            fontSize: 12
          }
        },
        tooltip: {},
        xAxis: {
          // 网格是否显示
          splitLine: {
            show: true
          },
          // x轴旋转,避免叠加 # https://echarts.apache.org/v4/zh/option.html#xAxis.axisLabel.rotate
          axisLabel: {
            rotate: 30
          },
          data: xAxisData
        },
        yAxis: {
          splitLine: {
            show: false
          }
        },
        series: [{
          name: '订单',
          type: 'bar',
          data: orderDataArr
        }, {
          name: '退单',
          type: 'bar',
          data: returnOrderDataArr
        }]

      }
      myChart.setOption(options)
    }
  }
}
</script>

<style scoped lang="scss">
  .order-charts{
    width: 100%;
    height: 100%;
  }
</style>
